<!--关键词词库-->
<template>
  <div class="ele-body" style="padding-bottom: 71px">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="70px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card>
        <div class="flex-align-center keyword-top">
          <div class="keyword-title">关键词词库</div>
          <div class="flex-align-center border">
            <div v-for="(i,j) in typeList" :key="j" @click="typeClick(i.id)">
              <div :class="form.platform== typeList[j].id ? 'select-type' : 'no-select-type'" class="flex">{{i.name}}</div>
            </div></div>
        </div>
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="标题">
              <el-input
                v-model="form.taticsName"
                placeholder="请输入标题"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="5" :xl="5">
            <el-form-item label="组词策略">
              <el-select
                v-model="form.tatics"
                placeholder="请选择组词策略"
                class="ele-block"
                clearable
              >
                <el-option
                  v-for="item in taticsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="5" :xl="5">
          <el-form-item label="创建时间" style="margin-bottom: 0">
            <el-date-picker
              v-model="datetime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="ele-fluid"
              @change="select"
            />
          </el-form-item>
          </el-col>
          <el-col :xs="19" :sm="19" :lg="9" :xl="9" style="text-align: right">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see(form)"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
        <!-- hideOnSinglePage：是否隐藏页码 -->
        <ele-pro-table
          ref="table"
          size="mini"
          :columns="columns"
          :datasource="datasource"
          :selection.sync="selection"
          :need-page="true"
          :hideOnSinglePage="false"
        >
          <!--头部按钮-->
          <template v-slot:toolbar>
            <div class="btn-class">
              <el-button type="danger" @click="delMoreAccount">
                删除
              </el-button>
            </div>
          </template>
          <!--操作-->
          <template v-slot:action="{ row }">
            <div class="flex-around">
              <el-link
                type="primary"
                :underline="false"
                @click.stop="worksClick(row)"
              >
                编辑
              </el-link>
              <el-link
                type="danger"
                :underline="false"
                @click.stop="delThesaurus(row)"
              >
                删除
              </el-link>
            </div>
          </template>
        </ele-pro-table>
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import {querySeo, delSeo} from "@/api/matrixManage/seo";
  import RegionsSelect from '@/components/RegionsSelect/index.vue';
  import {projectPage, scaleList} from "@/api/creatCenter/authoringClips";
  import {listUserFiles, publicFile, registerMedia} from "@/api/creatCenter/material";
  import {delAccount} from "@/api/matrixManage/accountList";
  import {queryGroup} from "@/api/matrixManage/groupManage";
  export default {
    name: "authoringClips",
    components: { RegionsSelect},
    data() {
      return {
        datetime:[],
        // 组词策略 List
        taticsList:[
          {
            id:1,
            name:'词头+主词'
          },
          {
            id:2,
            name:'主词+长尾词'
          },
          {
            id:3,
            name:'区域+主词'
          },
          {
            id:4,
            name:'区域+词头+主词'
          },
          {
            id:5,
            name:'区域+主词+长尾词'
          },
          {
            id:6,
            name:'词头+主词+长尾词'
          },
          {
            id:7,
            name:'区域+词头+主词+长尾词'
          }
        ],
        // 表格选中数据
        selection: [],
        typeList:[
          {
            name:'D音',
            id:1
          },
          {
            name:'K手',
            id:2
          },
          {
            name:'视频号',
            id:3}
        ],
        //创作剪辑list
        list:[],
        // 列表数据
        dataList: [],
        // 表单提交状态
        loading: false,
        // 表单数据
        form: {
          platform:1,
          username:this.$store.state.user.info.username,
        },
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'taticsName',
            label: '关键词标题',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'region',
            label: '区域',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'head',
            label: '词头',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'body',
            label: '主词',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'suffix',
            label: '长尾词',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'hashtag',
            label: '话题',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
      }
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      // this.init()
      console.log("进入查询211111111111111111=============")
    },
    methods: {
      // 查询日期
      select(e){
        console.log("日期选择e============",e,'form.datetime',this.datetime)
        if(this.datetime){
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
        console.log("日期选择e222222222222============",this.form)
      },

      /* 刷新————表格数据源 */
      datasource({ page, limit, where, order }) {
        console.log("form.tatics",this.form,'this.datetime)',this.datetime)
        let parms ={}
        if(this.form.isQuery==false){
          this.$set(parms,'username',this.form.username)
          this.$set(parms,'platform',this.form.platform)
        }
        else{
          parms = this.form
        }
        return querySeo({ ...where, ...order, page, limit,...parms });
      },
      see(){
        if(!this.form.taticsName){
          delete this.form.taticsName
        }
        if(!this.form.tatics){
          delete this.form.tatics
        }
        if(!this.datetime){
          delete this.form.startTime
          delete this.form.endTime
        }



        this.form.isQuery=true
        this.reload()
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      // init(){
      //   // 所属平台:1D音2K手3视频号
      //   // this.form.platform=this.typeList[0].id
      //   // 查询SEO文案【分页查询】 在查询列表页使用
      //   querySeo(this.form)
      //     .then((data) => {
      //       this.list=data.data.list
      //       console.log("查询SEO文案--data=======",data)
      //     })
      //     .catch((e) => {
      //       this.$message.error(e.msg);
      //     });
      // },
      handleEdit(index, row) {
        console.log(index, row);
      },
      // 编辑
      worksClick(e){
        this.$router.push({path:'/matrixManage/seoCopy/keywordSet',query: {form:e}})
        console.log("e",e)
      },
      // 多个删除
      delMoreAccount(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.handleDel(ids)
      },
      /* 单个删除 */
      delThesaurus(row) {
        console.log("单个删除",row)
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.handleDel(ids)
      },
      handleDel(ids){
        this.$confirm('此操作将永久删除该词库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delSeo({
            ids:ids
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      // 分类选择
      typeClick(e){
        this.$set(this.form,'platform',e)
        this.form.isQuery=false
        this.reload()
      },
      //重置
      resetting(){
        // 前提是表单项中要使用prop属性，绑定input中的v-model所绑定的字段，才可以被清空
        this.$refs.form.resetFields()
        delete this.form.taticsName
        delete this.form.tatics
        this.datetime=''
        delete this.form.startTime
        delete this.form.endTime
        // 清空所属平台
        // this.form.platform=1 //重置‘抖音/快手’分类
        this.reload()
      },
    }
  }
</script>

<style scoped lang="less">
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }

  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>

